<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="root">
           
        </div>
        <script
            src="https://unpkg.com/react@18/umd/react.development.js"
            crossorigin
        ></script>
        <script
            src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
            crossorigin
        ></script>
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

        <script type="text/babel">
            class DivElement extends React.Component{
                state = {
                    lists:[]
                }
                count = 1;
                constructor(props){
                    super(props);
                }
                handleAdd = () => {
                    this.state.lists.push({checked:false,content:"列表" + this.count++});
                    this.setState({
                        lists:this.state.lists
                    });
                }
                handleChange = (e) => {
                    this.state.lists[e.target.value].checked = e.target.checked;
                    this.setState({
                        lists:this.state.lists
                    })
                }
                handleRemove = () => {
                    this.setState({
                        lists:this.state.lists.filter(item => !item.checked)
                    });
                }
                render(){
                    return <div>
                            <input type="button" value="增加" onClick={this.handleAdd} />
                            <input type="button" value="删除" onClick={this.handleRemove}/>
                            <ul>
                                {
                                    this.state.lists.map((item,index) => (
                                        <li>
                                            <input type="checkbox" 
                                            value={index}
                                            checked={item.checked} 
                                            onChange={this.handleChange} />
                                            {item.content}
                                        </li>
                                    ))
                                }
                            </ul>
                        </div>
                }
            }
            const root = ReactDOM.createRoot(document.getElementById("root"));
            root.render(<DivElement ></DivElement>);
        </script>
    </body>
</html>
